import { useState } from 'react'
import { useEvent } from 'react-use'
import './App.css'

// 获取vscode提供的api
const vscode = acquireVsCodeApi()

function App() {
  const [message, setMessage] = useState("")

  // 监听后端发来的信息
  useEvent('message', (e: MessageEvent) => {
    setMessage(e.data)
  })

  // 发送信息给后端
  const postMessage = async () => {
    vscode.postMessage('你好后端')
  }

  return (
    <>
      <div className="card">
        <p>{message}</p>
        <button onClick={postMessage}>
          发送信息给后端
        </button>
      </div>
    </>
  )
}

export default App
